<template>
  <div class="line-container">
    <div id="chart_left3" class="chart" />
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'SaleMonthLine',
  data() {
    return {

    }
  },
  mounted() {
    this.getEchartLeft3()
  },
  beforeDestroy() {

  },
  methods: {
    getEchartLeft3() {
      const myChart = echarts.init(document.getElementById('chart_left3'))
      // const data = {
      //   city: ['2015', '2016', '2017', '2018', '2019', '2020'],
      //   num: ['555', '896', '1935', '2922', '4508', '5000']
      // }

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          formatter: (value, a, v, c) => {
            return value[0].seriesName + '<br>' + value[0].name + '月营业收入：<br>' + value[0].value + '万元<br>' + value[1].seriesName + '<br>' + value[1].name + '月营业收入：<br>' + value[1].value + '万元'
          }
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        color: ['#289df5', '#fbc01b'],
        xAxis: [{
          type: 'category',
          // boundaryGap: true,
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: false,
            lineStyle: {
              color: '#092b5d'
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#24c4ff',
              margin: 15
            },
            name: '月份',
            formatter: (data) => {
              return data + '月'
            }
          },
          axisTick: {
            show: false
          },
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
        }],
        yAxis: [{
          type: 'value',
          min: 0,
          max: 10000,
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#051d5f'],
              width: 1,
              type: 'solid'

            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#092b5d'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#24c4ff'
            }
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '棉花',
          type: 'line',
          symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbolSize: 0,
          lineStyle: {
            normal: {
              color: '#289df5' // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)'
          },
          itemStyle: {
            normal: {
              color: '#289df5', // 折线条的颜色
              borderColor: '#289df5', // 拐点边框颜色
              areaStyle: {
                type: 'default',
                opacity: 0.2
              }
            }
          },
          // label: {
          //   normal: {
          //     show: true,
          //     position: 'top',
          //     formatter: [
          //       ' {a|{c}}',
          //     ].join(','),
          //     rich: {
          //       a: {
          //         color: '#fff',
          //         align: 'center',
          //       },
          //     }
          //   }
          // },
          smooth: true,
          // areaStyle: { //区域填充样式
          //   normal: {
          //     //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: "rgba(124, 128, 244,.3)"
          //     },{
          //       offset: 1,
          //       color: "rgba(124, 128, 244, 0)"
          //     }], false),
          //     shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
          //     shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          //   }
          // },
          data: [3100, 2120, 2210, 1540, 2600, 4300, 3100, 1100, 1200, 2100, 1240, 4000]
        },
        {
          name: '棉花',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 0,
          itemStyle: {
            normal: {
              color: '#fbc01b',
              borderColor: '#fbc01b',
              areaStyle: {
                type: 'default',
                opacity: 0.2
              }
            }
          },
          data: [5100, 7120, 6210, 7540, 7600, 5300, 6100, 7100, 8200, 9100, 7240, 6000]
        }]
      }

      myChart.setOption(option, true)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.line-container {
  height: 100%;
  width: 100%;
  padding-bottom: 0.1rem;
  .chart {
    height: 100%;
    width: 100%;

  }
}
</style>
